<template>

	<view class="page">
		<view class="header">
			<view class="common-box-down">
				<view class="data-item flex flex-y-center flex-x-between">
					<view>开始时间</view>
					<view class="flex" style="align-items: center;">
						<view>
							<picker mode="date" :value="searchForm.beginDate" :end="searchForm.endDate" @change="(e) =>bindDateChange('beginDate',e)">
								<view class="uni-input">{{searchForm.beginDate || '请选择日期'}}</view>
							</picker>
						</view>
						<view style="margin-left: 10rpx;width: 40rpx;height: 40rpx;">
							<svg t="1721379327130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1487">
								<path d="M638.88124999 469.11875l43.828125 43.828125-44.175 44.175-323.090625 324.88125c-11.9625 12.0375-11.9625 31.734375 0 43.790625 11.9625 12.01875 31.584375 12.01875 43.528125 0l388.828125-390.946875c11.934375-12.0375 11.934375-31.771875 0-43.790625L358.97187499 100.08125c-11.94375-12.01875-31.575-12.01875-43.528125 0-11.9625 12.065625-11.9625 31.771875 0 43.790625l323.4375 325.246875z" fill="#000000" p-id="1488"></path>
							</svg>
						</view>
					</view>	
				</view>
			</view>
			<view class="common-box-down">
				<view class="data-item flex flex-y-center flex-x-between">
					<view>结束时间</view>
					<view class="flex" style="align-items: center;">
						<view>
							<picker mode="date" :value="searchForm.endDate" :start="searchForm.beginDate" @change="(e) =>bindDateChange('endDate',e)">
								<view class="uni-input">{{searchForm.endDate || '请选择日期'}}</view>
							</picker>
						</view>
						<view style="margin-left: 10rpx;width: 40rpx;height: 40rpx;">
							<svg t="1721379327130" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1487">
								<path d="M638.88124999 469.11875l43.828125 43.828125-44.175 44.175-323.090625 324.88125c-11.9625 12.0375-11.9625 31.734375 0 43.790625 11.9625 12.01875 31.584375 12.01875 43.528125 0l388.828125-390.946875c11.934375-12.0375 11.934375-31.771875 0-43.790625L358.97187499 100.08125c-11.94375-12.01875-31.575-12.01875-43.528125 0-11.9625 12.065625-11.9625 31.771875 0 43.790625l323.4375 325.246875z" fill="#000000" p-id="1488"></path>
							</svg>
						</view>
					</view>
				</view>
			</view>
			
			<view class="header-ctr">
				<view class="button" @click="search">搜索</view><view class="button" @click="reset">重置</view>
			</view>
			
		</view>
		
		<view class="body">
			<view class="user-status" v-for=" item in dataList">
				<template v-if="searchForm.type == 'user'">
					<view class="user-data">
						<view>
							<image v-if="item.avatar_url" :src="item.avatar_url" mode="aspectFill" class="acatar"></image>
							<image v-else src="/static/icon/default-avatar.png" mode="aspectFill" class="acatar"></image>
						</view>
						<view class="name-datetime">
							<view class="name">
								<view class="name-text">{{item.nickname}}</view>
								<view class="id" :style="{color: '#FF7104',border:'1px solid'+'#FF7104'}">ID:{{item.user_id}}</view>
							</view>
							<view class="tel">
								{{item.mobile}}
								<span class="iconfont icon-dianhua3"></span>
							</view>
							<view class="datetime">{{item.created_at}}</view>
						</view>
					</view>
					<view class="order-data">
						<view class="name-text">{{item.store.name || '未知'}}</view>
						<view>￥{{item.order_price || 0}}</view>
						<view>
							<text v-if="item.order_type == '{{%plugin_mch_checkout_order}}'">线下收款码支付</text>
							<text v-if="item.order_type == '{{%order}}'">线上订单支付</text>
						</view>
					</view>
				</template>
				
				<template v-if="searchForm.type == 'store'">
					<view class="user-data">
						<view>
							<image v-if="item.store.cover_url  && item.store.cover_url != '/'" :src="item.store.cover_url" mode="aspectFill" class="acatar"></image>
							<image v-else src="https://h5-mingyuanriji.cn/web/static/header-logo.png" mode="aspectFill" class="acatar"></image>
						</view>
						<view class="name-datetime">
							<view class="name">
								<view class="name-text">{{item.store.name}}</view>
							</view>
							<view class="tel">
								{{item.store.mobile}}
								<span class="iconfont icon-dianhua3"></span>
							</view>
							<view class="datetime">{{item.created_at}}</view>
						</view>
					</view>
					<view class="order-data">
						<view class="name-text">{{item.nickname || '未知'}}</view>
						<view>￥{{item.order_price || 0}}</view>
						<view>
							<text v-if="item.order_type == '{{%plugin_mch_checkout_order}}'">线下收款码支付</text>
							<text v-if="item.order_type == '{{%order}}'">线上订单支付</text>
						</view>
					</view>
				</template>
			</view>
			
			
			
			<!--加载loadding-->
			<main-loadmore :visible="loadding" :index="3" type="red"></main-loadmore>
			<main-nomore :visible="!pullUpOn"></main-nomore>
		</view>
		
	</view>
	
</template>

<script>
	export default{
		data(){
			return {
				loadding:false,
				pullUpOn:false,
				searchForm:{
					methods:"getMchOrderList",
					type:"",
					beginDate:'',
					endDate:'',
					order:[{key:'li.created_at',value:3}],
					page:1
				},
				page_count:0,
				dataList:[]
			}
		},
		onLoad(opt) {
			this.searchForm.beginDate = opt.beginDate ?? '';
			this.searchForm.endDate = opt.endDate ?? '';
		},
		onShow() {
			this.getDataList();
		},
		methods:{
			search(){
				this.page_count = 0;
				this.searchForm.page = 1;
				this.dataList = [];
				this.getDataList();
			},
			reset(){
				this.searchForm = {
					methods:"getMchOrderList",
					beginDate:'',
					endDate:'',
					order:[{key:'li.created_at',value:3}],
					page:1
				}
			},
			bindDateChange(key,e){
				this.$set(this.searchForm,key,e.detail.value);
				this.$forceUpdate();
			},
			async getDataList(){
				this.loadding = true;
				this.pullUpOn = true;
				let res = await this.$http.request({
					url: this.$api.localLife.statisticsDetail,
					method: 'POST',
					data:this.searchForm
				});
				this.loadding = false;
				this.pullUpOn = false;
				if (res.code == 0) {
					this.searchForm.page = res.data.pagination.current_page;
					this.page_count = res.data.pagination.page_count;
					this.dataList.push(...res.data.list);
				}
			}
		},
	 	onReachBottom() {
			if (this.searchForm.page >= this.page_count) {
				return;
			}
			this.searchForm.page++;
			this.getDataList();
		}
	}
</script>

<style lang="scss">
	.header{
		width: 100vw;
		background-color: #fff;
		padding:20rpx 20rpx;
		position: fixed;
		top: 0;
		box-shadow: 0 2rpx 20rpx rgba(0,0,0,0.5);
		z-index: 999;
	}
	.common-box-down{
		padding: 30rpx 0;
		border-bottom: 1rpx solid #f2f2f2;
	}
	.header-ctr{
		padding: 20rpx 0 0;
		display: flex;
		justify-content: space-around;
	}
	.button{
		padding: 10rpx 80rpx;
		background-color: #ffbc00;
		color:#000000;
		border-radius: 20rpx;
	}
	.body{
		margin-top: 360rpx;
		padding: 0 20rpx;
	}
	
	.name-text {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		max-width: 200rpx;
		font-size: 9pt;
		font-weight: 600;
	}
	.user-status {
		display: flex;
		justify-content: space-between;
		align-items: center;
		position: relative;
		padding: 20rpx 0;
		// margin-bottom: 16rpx;
		
		.user-data{
			display: flex;
		}
		
		.acatar {
			width: 100rpx;
			height: 100rpx;
			border-radius: 50%;
			margin-right: 16rpx;
		}
	
		.name-datetime {
			margin-left: 20rpx;
			.name {
				display: flex;
				line-height: 37rpx;
				
				.id {
					margin-left: 12rpx;
					color: #bc0100;
					padding: 0 10rpx;
					font-size: 9pt;
					transform: scale(0.8);
					line-height: 32rpx;
					border: 1rpx solid rgba(188, 1, 0, 1);
					border-radius: 14rpx;
				}
			}
	
			.tel,
			.datetime {
				font-size: 9pt;
				color: #808080;
	
				.iconfont {
					line-height: 16px;
					font-size: 10pt;
				}
			}
		}

		.order-data{
			width: 30vw;
			font-size: 9pt;
		}
	}
	
</style>
